<template>
  <view class="list">
    <view class="item" v-for="(item,i) in list" :key="i">
      <view class="left">
        <view class="message text-cut2">{{type[item.type]}}提现</view>
        <view class="time">{{ item.createTime }}</view>
      </view>
      <view class="right">
        <view>￥</view>
        <view class="num">{{ item.money }}</view>
      </view>
    </view>
    <list-loading v-if="loading"/>
    <list-empty v-if="!loading && (!list || list.length == 0)"/>
    <list-load-over v-else-if=" loadOver"/>
  </view>
</template>

<script>
import Api from "@/utils/Api";
import ListLoadOver from "@/components/list/loadOver";
import ListEmpty from "@/components/list/empty";
import ListLoading from "@/components/list/loading";

export default {
  components: {ListLoadOver, ListEmpty, ListLoading},
  name: "technician-withdrawal-record",
  data() {
    return {
      list: [],
      page: 0,
      loading: false,
      loadOver: false,
      type: ['支付宝', '微信', '银行卡']
    }
  },
  methods: {
    refresh() {
      this.clear();
      this.getList();
    },
    clear() {
      this.page = 0;
      this.list = [];
      this.loadOver = false;
      this.loading = false;
    },
    getList() {
      if (this.loadOver) return;
      this.loading = true;
      Api.getTechnicianWithdrawLog(++this.page).then(res => {
        this.list.push(...res)
        if (res.length < 10) this.loadOver = true;
      }).finally(() => this.loading = false)
    }
  },
  onLoad(options){
    options = this.core.decodeURIComponentObject(options);
    this.refresh();
  },
  onPullDownRefresh() {
    this.refresh();
  },
  onReachBottom() {
    this.getList();
  },
}
</script>

<style scoped lang='scss'>
.list {
  padding-bottom: env(safe-area-inset-bottom);

  .item {
    display: flex;
    padding: r(40px 50px);
    align-items: center;

    & + .item {
      border-top: 1px solid #eee;
    }

    .left {
      flex: 1;
      margin-right: r(30px);

      .message {
        font-size: r(30px);
        color: #333333;
      }

      .time {
        margin-top: r(30px);
        font-size: r(25px);
        color: #B5B5B5;
      }

    }

    .right {
      color: #E73832;
      font-size: r(22px);
      display: flex;

      .num {
        font-size: r(36px);
      }
    }

  }
}
</style>